<script setup lang="ts">
import { ref, toRef } from 'vue';
import useAppStore from '@/store';
import {
  MemberProfileResult,
  getMemberProfile,
  updateMemberProfile,
  Gender,
} from '@/api/profile';
import { onLoad } from '@dcloudio/uni-app';
import { useMemberStore } from '@/store/member';
const appStore = useAppStore();
const safeArea = toRef(appStore, 'safeArea');

const goBack = () => {
  uni.navigateBack({});
};

// 上传头像
const memberStore = useMemberStore();
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      console.log(res.tempFilePaths[0]);
      uni.uploadFile({
        url: '/member/profile/avatar',
        name: 'file',
        filePath: res.tempFilePaths[0],
        success: (res2) => {
          const avatar = JSON.parse(res2.data).result.avatar;
          profile.value.avatar = avatar;
          // 修改全局头像
          memberStore.profile.avatar = avatar;
          // 提示用户
          uni.showToast({ icon: 'success', title: '头像更新成功~' });
        },
      });
    },
  });
};

// 城市码值
let codes: string[] = [];
// 修改用户信息
const submitForm = async () => {
  const { nickname, profession, gender, birthday } = profile.value;
  const [provinceCode, cityCode, countyCode] = codes;
  await updateMemberProfile({
    nickname,
    profession,
    gender,
    birthday,
    provinceCode,
    cityCode,
    countyCode,
  });
  uni.showToast({ title: '修改成功' });
  // 修改全局数据--上个页面数据回显
  memberStore.profile.nickname = nickname;
  setTimeout(() => {
    uni.navigateBack({});
  }, 2000);
};
// 修改性别
const genderChange = (ev: WechatMiniprogram.RadioGroupChange) => {
  // console.log(ev.detail.value);
  profile.value.gender = ev.detail.value as Gender;
};
// 修改生日
const birthdayChange = (ev: WechatMiniprogram.PickerChange) => {
  profile.value.birthday = ev.detail.value as string;
};
// 修改城市
const fullLocationChange = (ev: WechatMiniprogram.PickerChange) => {
  profile.value.fullLocation = (ev.detail.value as string[]).join('');
  codes = ev.detail.code;
};

const currnetDate = ref(Date.now());
const profile = ref({} as MemberProfileResult);
onLoad(async () => {
  const res = await getMemberProfile();
  profile.value = res;
});
</script>

<template>
  <view class="viewport">
    <view class="navbar" :style="{ paddingTop: safeArea?.top + 'px' }">
      <view class="back icon-left" @tap="goBack"></view>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar" @tap="chooseImage">
        <image :src="profile.avatar" mode="aspectFill" />
        <text>点击修改头像</text>
      </view>
      <!-- 用户信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <text>{{ profile.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <input v-model="profile.nickname" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="genderChange">
            <label class="radio">
              <radio
                value="男"
                color="#27ba9b"
                :checked="profile.gender === '男'"
              />
              男
            </label>
            <label class="radio">
              <radio
                value="女"
                color="#27ba9b"
                :checked="profile.gender === '女'"
              />
              女
            </label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">出生日期</text>
          <picker
            @change="birthdayChange"
            mode="date"
            start="1900-01-01"
            :end="currnetDate"
          >
            <view>{{ profile.birthday || '请选择出生日期' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker mode="region" @change="fullLocationChange">
            <view>{{ profile.fullLocation || '请选择城市' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <input v-model="profile.profession" />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="submitForm">保 存</view>
    </scroll-view>
  </view>
</template>

<style>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}

.navbar .title {
  height: 40px;
  line-height: 32px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.navbar .back {
  position: absolute;
  left: 20rpx;
  top: 22px;
  font-size: 23px;
  z-index: 9;
  color: #fff;
}

.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
}

.avatar image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.avatar text {
  display: block;
  padding-top: 20rpx;
  line-height: 1;
  font-size: 26rpx;
  color: #fff;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 180rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item .radio {
  display: inline-block;
  height: 46rpx;
  margin-right: 20rpx;
  vertical-align: middle;
}

.form .form-item radio {
  transform: scale(0.7) translateY(-2px);
}

.form .form-item picker {
  flex: 1;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
